# Transition Open

## Examples


### Slide from Top

Transition Open content sliding in from the top.

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function SlideFromTop() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        textAlign: 'center',
        width: 150,
    };

    // Container and outer styles allow for inset animations
    const containerStyle: React.CSSProperties = {
        border: '1px solid black',
        height: 228,
        marginTop: 10,
        position: 'relative',
    };
    const outerStyle: React.CSSProperties = {
        position: 'absolute',
        top: 0,
    };

    return (
        <>
            <Button onClick={handleClick}>Click me!</Button>
            <div style={containerStyle}>
                <TransitionOpen animation="slideFromTop" open={open} outerStyle={outerStyle}>
                    <div style={style}>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                    </div>
                </TransitionOpen>
            </div>
        </>
    );
}

export default SlideFromTop;
```



### Slide from Bottom

Transition Open content sliding in from the bottom.

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function SlideFromBottom() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        textAlign: 'center',
        width: 150,
    };

    // Container and outer styles allow for inset animations
    const containerStyle: React.CSSProperties = {
        border: '1px solid black',
        height: 228,
        marginTop: 10,
        position: 'relative',
    };
    const outerStyle: React.CSSProperties = {
        bottom: 0,
        position: 'absolute',
    };

    return (
        <>
            <Button onClick={handleClick}>Click me!</Button>
            <div style={containerStyle}>
                <TransitionOpen animation="slideFromBottom" open={open} outerStyle={outerStyle}>
                    <div style={style}>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                    </div>
                </TransitionOpen>
            </div>
        </>
    );
}

export default SlideFromBottom;
```



### Slide from Left

Transition Open content sliding in from the left.

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function SlideFromLeft() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        textAlign: 'center',
        width: 150,
    };

    // Container and outer styles allow for inset animations
    const containerStyle: React.CSSProperties = {
        border: '1px solid black',
        height: 228,
        marginTop: 10,
        position: 'relative',
    };
    const outerStyle: React.CSSProperties = {
        left: 0,
        position: 'absolute',
    };

    return (
        <>
            <Button onClick={handleClick}>Click me!</Button>
            <div style={containerStyle}>
                <TransitionOpen animation="slideFromLeft" open={open} outerStyle={outerStyle}>
                    <div style={style}>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                    </div>
                </TransitionOpen>
            </div>
        </>
    );
}

export default SlideFromLeft;
```



### Slide from Right

Transition Open content sliding in from the right.

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function SlideFromRight() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        textAlign: 'center',
        width: 150,
    };

    // Container and outer styles allow for inset animations
    const containerStyle: React.CSSProperties = {
        border: '1px solid black',
        height: 228,
        marginTop: 10,
        position: 'relative',
    };
    const outerStyle: React.CSSProperties = {
        position: 'absolute',
        right: 0,
    };

    return (
        <>
            <Button onClick={handleClick}>Click me!</Button>
            <div style={containerStyle}>
                <TransitionOpen animation="slideFromRight" open={open} outerStyle={outerStyle}>
                    <div style={style}>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                        <p>Hello world</p>
                    </div>
                </TransitionOpen>
            </div>
        </>
    );
}

export default SlideFromRight;
```



### Expand Height

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function ExpandHeight() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        marginTop: 10,
        textAlign: 'center',
        width: 150,
    };
    return (
        <div>
            <Button onClick={handleClick}>Click me!</Button>
            <TransitionOpen animation="expandHeight" open={open}>
                <div style={style}>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </TransitionOpen>
        </div>
    );
}

export default ExpandHeight;
```



### Expand Width

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function ExpandWidth() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        marginTop: 10,
        textAlign: 'center',
        width: 150,
    };

    return (
        <div style={{ height: 228 }}>
            <Button onClick={handleClick}>Click me!</Button>
            <TransitionOpen animation="expandWidth" open={open}>
                <div style={style}>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </TransitionOpen>
        </div>
    );
}

export default ExpandWidth;
```



### None

Transition Open content appears with no animation.

```typescript
import React, { useCallback, useState } from 'react';

import Button from '@splunk/react-ui/Button';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


function None() {
    const [open, setOpen] = useState(false);
    const handleClick = useCallback(() => {
        setOpen((isOpen) => !isOpen);
    }, []);

    const style: React.CSSProperties = {
        border: '1px solid black',
        marginTop: 10,
        textAlign: 'center',
        width: 150,
    };

    return (
        <div>
            <Button onClick={handleClick}>Click me!</Button>
            <TransitionOpen animation="none" open={open}>
                <div style={style}>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </TransitionOpen>
        </div>
    );
}

export default None;
```




## API


### TransitionOpen API

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| animateOnMount | boolean | no |  |  |
| animation | AnimationType \| AnimationOnOpen \| AnimationOnClose | no | 'expandHeight' | The animation to use when opening and closing. Can be: - A string (e.g., 'expandHeight') to animate both open and close - An object with `{ open: AnimationType, close: 'none' }` to animate only when opening - An object with `{ open: 'none', close: AnimationType }` to animate only when closing |
| children | React.ReactNode | no |  |  |
| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| id | string | no |  | The `id` of the inner container. |
| innerClassName | string | no |  | An additional className to inner container. |
| innerStyle | React.CSSProperties | no | {} |  |
| onAnimationEnd | () => void | no |  |  |
| onAnimationStart | () => void | no |  |  |
| open | boolean | no |  | Whether the component is currently open or not. |
| outerClassName | string | no |  | An additional className to outer container. |
| outerId | string | no |  | The `id` of the outer container. |
| outerStyle | React.CSSProperties | no | {} |  |
| renderChildrenWhenCollapsed | boolean | no |  | When true, children are always rendered whether open or closed. |
| retainFocus | boolean | no |  | Keep focus within `TransitionOpen` while open. |
| takeFocus | boolean | no |  | When true, the `TransitionOpen` automatically takes focus when 'open' changes to true. |

#### Types

| Name | Type | Description |
|------|------|------|
| AnimationOnClose | { open: 'none'; close: AnimationType } |  |
| AnimationOnOpen | { open: AnimationType; close: 'none' } |  |
| AnimationType | \| 'slideFromTop'     \| 'slideFromRight'     \| 'slideFromBottom'     \| 'slideFromLeft'     \| 'expandHeight'     \| 'expandWidth'     \| 'none' |  |